// pages/map/map.js
import { server } from "../../utils/config.js";
//后台获取的地点数据经过处理后将放进此处
let wxMarkerData = [];
//地图上下文,map组件的上下文
let mapContext = null;
let map = require('../../data/map.js')

Page({

    data: {
        server: server,
        markers: [], //标记地点的信息
        latitude: '34.528888', //中心纬度
        longitude: '109.10813', //中心经度
        scaleIndex: 18, // 缩放等级，18
        isPopupShow: false, //控制底部弹出层显隐藏
        currentPlace: null, // 
    },

    /**
     * 前往导航页面
     */
    toNavPageClick() {
        let cp = this.data.currentPlace;
        wx.navigateTo({
            url: './navigation_walk/navigation_walk?e_longitude=' + cp.longitude + '&e_latitude=' + cp.latitude + '&e_name=' + cp.title,
        })
    },

    /**
     * 关闭底部弹窗
     */
    closePopup() {
        this.setData({
            isPopupShow: false
        })
    },

    /**
     * 点击气泡
     */
    calloutClick(res) {
        for (const m of this.data.markers) {
            if (m.id === res.detail.markerId) {
                this.setData({
                    currentPlace: m
                });
                break;
            }
        }
        if (this.data.currentPlace !== null || this.data.currentPlace !== undefined) {
            this.setData({
                isPopupShow: true
            });
        }
    },

    /**
     * 从后台获取地址数据
     */
    getAddressData() {
        var that = this;
        //网络请求，获取数据
        wx.fetch({ url: "/map" })
            .then(res => {
                let returnResults = res.data.maps;
                //数据处理
                let markers = [];
                returnResults.forEach(element => {
                    //填充缺少的固定字段
                    element.joinCluster = true;
                    element.height = 8;
                    element.width = 16;
                    element.customCallout = {
                            anchorY: 0,
                            anchorX: 0,
                            display: 'ALWAYS',
                        },
                        markers.push(element);
                });
                wxMarkerData = markers;
                that.setData({
                    markers: wxMarkerData,
                });
            })
    },

    /**
     * 创建点聚合
     */
    createPointAggregation() {
        //点聚合
        mapContext = wx.createMapContext('map');
        //初始化聚合配置
        mapContext.initMarkerCluster({
            enableDefaultStyle: false,
            zoomOnClick: true,
            gridSize: 20,
            complete(res) {}
        });
        //监听地图事件
        mapContext.on('markerClusterCreate', res => {
            const clusters = res.clusters;
            const markers = clusters.map(cluster => {
                const {
                    center,
                    clusterId,
                    markerIds
                } = cluster;
                return {
                    ...center,
                    width: 0,
                    height: 0,
                    clusterId,
                    label: {
                        content: "西安工商学院",
                        color: "#4581c7",
                        fontSize: "15",
                        padding: 5,
                        borderRadius: 5,
                        bgColor: "#ffffff",
                        textAlign: "center"
                    }
                }
            })
        });
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        wx.setNavigationBarColor({
            backgroundColor: '#ffffff',
            frontColor: '#000000',
        })
        this.setData({
            polygons: [{
                points: map.points,
                fillColor: "#d5dff233",
                strokeColor: "#789cff",
                strokeWidth: 2,
                zIndex: 1
            }],
        })
        //从服务器获取数据
        this.getAddressData();
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    },

    /**
     * 监听页面滚动事件
     */
    onPageScroll(res) {

    }
})